<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Playground</title>
<script src="../blockly_uncompressed.js"></script>
<script src="../generators/javascript.js"></script>
<script src="../generators/javascript/logic.js"></script>
<script src="../generators/javascript/loops.js"></script>
<script src="../generators/javascript/math.js"></script>
<script src="../generators/javascript/text.js"></script>
<script src="../generators/javascript/lists.js"></script>
<script src="../generators/javascript/colour.js"></script>
<script src="../generators/javascript/variables.js"></script>
<script src="../generators/javascript/procedures.js"></script>
<script src="../generators/php.js"></script>
<script src="../generators/php/logic.js"></script>
<script src="../generators/php/loops.js"></script>
<script src="../generators/php/math.js"></script>
<script src="../generators/php/text.js"></script>
<script src="../generators/php/lists.js"></script>
<script src="../generators/php/colour.js"></script>
<script src="../generators/php/variables.js"></script>
<script src="../generators/php/procedures.js"></script>
<script src="../generators/python.js"></script>
<script src="../generators/python/logic.js"></script>
<script src="../generators/python/loops.js"></script>
<script src="../generators/python/math.js"></script>
<script src="../generators/python/text.js"></script>
<script src="../generators/python/lists.js"></script>
<script src="../generators/python/colour.js"></script>
<script src="../generators/python/variables.js"></script>
<script src="../generators/python/procedures.js"></script>
<script src="../generators/dart.js"></script>
<script src="../generators/dart/logic.js"></script>
<script src="../generators/dart/loops.js"></script>
<script src="../generators/dart/math.js"></script>
<script src="../generators/dart/text.js"></script>
<script src="../generators/dart/lists.js"></script>
<script src="../generators/dart/colour.js"></script>
<script src="../generators/dart/variables.js"></script>
<script src="../generators/dart/procedures.js"></script>
<script src="../msg/messages.js"></script>
<script src="../blocks/logic.js"></script>
<script src="../blocks/loops.js"></script>
<script src="../blocks/math.js"></script>
<script src="../blocks/text.js"></script>
<script src="../blocks/lists.js"></script>
<script src="../blocks/colour.js"></script>
<script src="../blocks/variables.js"></script>
<script src="../blocks/procedures.js"></script>
<!-- Load the Google Drive SDK Realtime libraries. -->
<script src="https://apis.google.com/js/api.js"></script>
<script>
'use strict';
// Depending on the URL argument, render as LTR or RTL.
var rtl = (document.location.search == '?rtl');
var workspace = null;

function enableRealtimeSpecificUi() {
  var realtimeDiv = document.getElementById('realtime');
  realtimeDiv.display = 'block';
}

function start() {
  var toolbox = document.getElementById('toolbox');
  workspace = Blockly.inject('blocklyDiv',
          {rtl: rtl,
           media: '../media/',
           toolbox: toolbox,
           comments: true,
           disable: true,
           collapse: true,
           grid:
             {spacing: 25,
              length: 3,
              colour: '#ccc',
              snap: true},
           readOnly: false,
           realtime: false,
           realtimeOptions:
             {clientId: 'YOUR CLIENT ID GOES HERE',
              chatbox: {elementId: 'chatbox'},
              collabElementId: 'collaborators'},
           scrollbars: true
          });
  if (Blockly.Realtime.isEnabled()) {
    enableRealtimeSpecificUi();
  }
}

function toXml() {
  var output = document.getElementById('importExport');
  var xml = Blockly.Xml.workspaceToDom(workspace);
  output.value = Blockly.Xml.domToPrettyText(xml);
  output.focus();
  output.select();
}

function fromXml() {
  var input = document.getElementById('importExport');
  var xml = Blockly.Xml.textToDom(input.value);
  Blockly.Xml.domToWorkspace(workspace, xml);
}

function toCode(lang) {
  var output = document.getElementById('importExport');
  output.value = Blockly[lang].workspaceToCode(workspace);
}

function airstrike(n) {
  var prototypes = [];
  var toolbox = document.getElementById('toolbox');
  var blocks = toolbox.getElementsByTagName('block');
  for (var i = 0, block; block = blocks[i]; i++) {
    prototypes.push(block.getAttribute('type'));
  }
  for (var i = 0; i < n; i++) {
    var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
    var block = Blockly.Block.obtain(workspace, prototype);
    block.initSvg();
    block.getSvgRoot().setAttribute('transform', 'translate(' +
        Math.round(Math.random() * 450 + 40) + ', ' +
        Math.round(Math.random() * 600 + 40) + ')');
    block.render();
  }
}

function spaghetti(n) {
  var xml = spaghettiXml;
  for(var i = 0; i < n; i++) {
    xml = xml.replace(/(<(statement|next)( name="DO0")?>)<\//g,
        '$1' + spaghettiXml + '</');
  }
  xml = '<xml xmlns="http://www.w3.org/1999/xhtml">' + xml + '</xml>';
  var dom = Blockly.Xml.textToDom(xml);
  console.time('Spaghetti domToWorkspace');
  Blockly.Xml.domToWorkspace(workspace, dom);
  console.timeEnd('Spaghetti domToWorkspace');
}
var spaghettiXml = [
  '  <block type="controls_if" inline="false" x="30" y="30">' +
  '    <value name="IF0">' +
  '      <block type="logic_compare" inline="true">' +
  '        <field name="OP">EQ</field>' +
  '        <value name="A">' +
  '          <block type="math_arithmetic" inline="true">' +
  '            <field name="OP">MULTIPLY</field>' +
  '            <value name="A">' +
  '              <block type="math_number">' +
  '                <field name="NUM">6</field>' +
  '              </block>' +
  '            </value>' +
  '            <value name="B">' +
  '              <block type="math_number">' +
  '                <field name="NUM">7</field>' +
  '              </block>' +
  '            </value>' +
  '          </block>' +
  '        </value>' +
  '        <value name="B">' +
  '          <block type="math_number">' +
  '            <field name="NUM">42</field>' +
  '          </block>' +
  '        </value>' +
  '      </block>' +
  '    </value>' +
  '    <statement name="DO0"></statement>' +
  '    <next></next>' +
  '  </block>'].join('\n');

</script>

<style>
html, body {
  height: 100%;
}
body {
  background-color: #fff;
  font-family: sans-serif;
  overflow: hidden;
}
h1 {
  font-weight: normal;
  font-size: 140%;
}
#blocklyDiv {
  float: right;
  height: 95%;
  width: 70%;
}
#collaborators {
  float: right;
  width: 30px;
  margin-left: 10px;
}
#collaborators > img {
  margin-right: 5px;
  height: 30px;
  padding-bottom: 5px;
  width: 30px;
  border-radius: 3px;
}
#importExport {
  font-family: monospace;
}
</style>
</head>
<body onload="start()">

  <div id="collaborators"></div>

  <div id="blocklyDiv"></div>

  <xml id="toolbox" style="display: none">
    <category name="Logic">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
      <block type="logic_null"></block>
      <block type="logic_ternary"></block>
    </category>
    <category name="Loops">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
        <value name="FROM">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
        <value name="BY">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
      </block>
      <block type="controls_forEach"></block>
      <block type="controls_flow_statements"></block>
    </category>
    <category name="Math">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
      <block type="math_trig"></block>
      <block type="math_constant"></block>
      <block type="math_number_property"></block>
      <block type="math_change">
        <value name="DELTA">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
      </block>
      <block type="math_round"></block>
      <block type="math_on_list"></block>
      <block type="math_modulo"></block>
      <block type="math_constrain">
        <value name="LOW">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="HIGH">
          <block type="math_number">
            <field name="NUM">100</field>
          </block>
        </value>
      </block>
      <block type="math_random_int">
        <value name="FROM">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <field name="NUM">100</field>
          </block>
        </value>
      </block>
      <block type="math_random_float"></block>
    </category>
    <category name="Text">
      <block type="text"></block>
      <block type="text_join"></block>
      <block type="text_append">
        <value name="TEXT">
          <block type="text"></block>
        </value>
      </block>
      <block type="text_length"></block>
      <block type="text_isEmpty"></block>
      <block type="text_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_charAt">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_getSubstring">
        <value name="STRING">
          <block type="variables_get">
            <field name="VAR">text</field>
          </block>
        </value>
      </block>
      <block type="text_changeCase"></block>
      <block type="text_trim"></block>
      <block type="text_print"></block>
      <block type="text_prompt_ext">
        <value name="TEXT">
          <block type="text"></block>
        </value>
      </block>
    </category>
    <category name="Lists">
      <block type="lists_create_empty"></block>
      <block type="lists_create_with"></block>
      <block type="lists_repeat">
        <value name="NUM">
          <block type="math_number">
            <field name="NUM">5</field>
          </block>
        </value>
      </block>
      <block type="lists_length"></block>
      <block type="lists_isEmpty"></block>
      <block type="lists_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_getIndex">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_setIndex">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_getSublist">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR">list</field>
          </block>
        </value>
      </block>
      <block type="lists_split">
        <value name="DELIM">
          <block type="text">
            <field name="TEXT">,</field>
          </block>
        </value>
      </block>
    </category>
    <category name="Colour">
      <block type="colour_picker"></block>
      <block type="colour_random"></block>
      <block type="colour_rgb">
        <value name="RED">
          <block type="math_number">
            <field name="NUM">100</field>
          </block>
        </value>
        <value name="GREEN">
          <block type="math_number">
            <field name="NUM">50</field>
          </block>
        </value>
        <value name="BLUE">
          <block type="math_number">
            <field name="NUM">0</field>
          </block>
        </value>
      </block>
      <block type="colour_blend">
        <value name="COLOUR1">
          <block type="colour_picker">
            <field name="COLOUR">#ff0000</field>
          </block>
        </value>
        <value name="COLOUR2">
          <block type="colour_picker">
            <field name="COLOUR">#3333ff</field>
          </block>
        </value>
        <value name="RATIO">
          <block type="math_number">
            <field name="NUM">0.5</field>
          </block>
        </value>
      </block>
    </category>
    <sep></sep>
    <category name="Variables" custom="VARIABLE"></category>
    <category name="Functions" custom="PROCEDURE"></category>
  </xml>

  <h1>Blockly Playground</h1>

  <p><a href="javascript:void(workspace.setVisible(true))">Show</a>
   - <a href="javascript:void(workspace.setVisible(false))">Hide</a></p>

  <script>
    if (rtl) {
      document.write('[ &larr; RTL. Switch to <A HREF="?ltr">LTR</A>. ]');
    } else {
      document.write('[ &rarr; LTR. Switch to <A HREF="?rtl">RTL</A>. ]');
    }
  </script>

  <p>
    <input type="button" value="Export to XML" onclick="toXml()">
    &nbsp;
    <input type="button" value="Import from XML" onclick="fromXml()">
    <br>
    <input type="button" value="To JavaScript" onclick="toCode('JavaScript')">
    &nbsp;
    <input type="button" value="To Python" onclick="toCode('Python')">
    &nbsp;
    <input type="button" value="To PHP" onclick="toCode('PHP')">
    &nbsp;
    <input type="button" value="To Dart" onclick="toCode('Dart')">
    <br>
    <textarea id="importExport" style="width: 26%; height: 12em"></textarea>
  </p>
  <hr>

  <p>
    Stress test:
    <input type="button" value="Airstrike!" onclick="airstrike(100)">
    <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
  </p>

  <!-- Realtime setup buttons. -->

  <div id="realtime" style="display: none">

    <p>Test realtime collaboration by opening
      <a target="_blank" href="#" onmouseover="this.href = window.location.href">
        this link</a> in a separate browser window or tab and they will be
      synchronized.  You can even share the link with a friend!.</p>

    <br>
    <br>

    <!-- Undo and redo buttons. -->
    <!-- TODO: Uncomment this when undo/redo are fixed. -->
    <!--
      <button id="undoButton" disabled>Undo</button>
      <button id="redoButton" disabled>Redo</button>
      <br />
    -->

    <!-- Text area that will be used for our collaborative chat box. -->
    <textarea id="chatbox" style="width: 26%; height: 12em" disabled="true"></textarea>

  </div>
</body>
</html>
